<template>
    <div id='login_box'>
        <div class='login_top'>
            <p class='arrow_p'><span class='arrow1'> </span></p>
            <p class='login_p'>京东登录</p>
        </div>
        <section class='page'>
            <div class='login-tab'>
                 <ul class='login_pas' @click='paslogin'><span class='pas_222 pas_cc22'>账号密码登录</span></ul>
                 <ul class='login_mes'  @click='msglogin'><span class='mes_222'>短信验证码登录</span></ul>
            </div>
        </section>
        <div class='wrap loginPage'>
             <!-- 账号密码登陆开始 -->
            <div class='login_pas11' :model="formLoginData"  :rules="rules">
                 <div class='input-container'>
                    <div class='txt-username'>账号</div>
                    <input id="username" class="acc-input username txt-input J_ping" type="text" value="" placeholder="用户名/邮箱/已验证手机" v-model="formLoginData.username" >
                     <span id='f_password'>{{msgphone}}</span>
                    <div class='icon icon-clear' @click='clear()'></div>
                </div>
                 <div class='input-container'>
                    <div class='txt-password'>密码</div>
                    <input id="password" type="password" class="acc-input password txt-input J_ping" placeholder="请输入密码" v-model="formLoginData.password">
                     <input id="login_password" type="text" class="acc-input password txt-input J_ping login_password" placeholder="请输入密码" v-model="formLoginData.password">
                     <span id='f_password'>{{msgpassword}}</span>
                    <div class='checkbtn' @click='passhow'></div>
                </div>
            </div>
            <!-- 短信认证框开始 -->
            <div class='sms_login'>
                <div class='sms-input-box'>
                    <div class='input-container'>
                        <label class='area-box J_ping'>
                            <span class="area_code" code="86">+86</span>
                            <i class="area_icon"></i>
                        </label>
                        <input type="tel" id="telphone" class="acc-input telphone sms-txt-input J_ping" placeholder="请输入手机号" report-eventid="MLoginRegister_SMSPhoneInput">
                        <i class="icon icon-clear" style="display: none;"></i>
                        <button data-mescode="true" class="mesg-code mesg-disable J_ping" id='msg_button' >获取验证码</button>
                    </div>
                    <div class="input-container">
                        <input id="telCode" class="acc-input telCode22 sms-txt-input J_ping" type="text" placeholder="请输入收到的验证码" autocomplete="off" report-eventid="MLoginRegister_VerificationInput">
                        <i class="icon icon-clearcc"></i>
                   </div>
                   <!-- 短信认证框结束 -->
                </div>
            </div>
            <div id='loginBtn'  class='loginBtn_cc' @click='login()'>登陆</div>
            <div id='loginOneStep'>一键登录</div>
            <div class='quick-nav clearfix'>
                <div class='txt-findpwd'><span class='icon icon-clock'></span><span class='txt-findpwd'><router-link :to="{path:'/reg'}">忘记密码</router-link></span></div>
                <div class='J_ping quickReg'><span class='icon icon-reg'></span><span class='txt-quickReg'><router-link :to="{path:'/reg'}">手机快速注册</router-link></span></div>
            </div>
            <div class='quick-login'>
                <h4 class='txt-otherLogin'>其他登录方式</h4>
                <div class='icon_login'>
                  <div class='J_ping quick-qq'>
                    <span class="icon icon-qq"></span>
                  </div>
                  <div class='J_ping quick-wx'>
                    <span class="icon icon-wx"></span>
                  </div>
                </div>
                <div class='agreement-tips'>
                    登录即代表您已同意<router-link to="">京东隐私政策</router-link>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      formLoginData: {
        username: "",
        password: "",
      },
      msgpassword:'',
    };
  },
  methods: {
    paslogin() {
      this.$jq(".login_pas11").removeClass("show");
      this.$jq(".sms_login").removeClass("show2");
      this.$jq(".pas_cc22").addClass("pas_2222");
      this.$jq(".mes_222").removeClass("pas_2222");
    },
    msglogin() {
      this.$jq(".login_pas11").addClass("show");
      this.$jq(".sms_login").addClass("show2");
      this.$jq(".mes_222").addClass("pas_2222");
      this.$jq(".pas_cc22").removeClass("pas_2222");
      this.$jq(".pas_cc22").removeClass("pas_222");
    },
    clear() {
      this.$jq("#username")
        .hide()
        .val("用户名/邮箱/已验证手机")
        .show()
        .focus();
      this.$jq("#username")
        .focus()
        .val("");
    },
    passhow() {
      this.$jq("#password").toggleClass("show");
      this.$jq("#login_password").toggleClass("show2");
      this.$jq("#password").val = this.$jq("#login_password").val;
    },
    login() {
      this.$jq("#loginBtn").addClass("btn-active");
      var pwdReg = /^[a-zA-Z]\w{5,17}$/; //以字母开头，长度在6~18之间，只能包含字母、数字和下划线
      var value = this.$jq("#password").val();
      if (this.password == "") {
        this.msgpassword = "密码不能为空";
      } else if (!pwdReg.test(value)) {
        this.msgpassword = "密码不合法";
      } else {
        this.msgpassword = "密码合法";
      }
      var usernameReg=/^(13[0-9]|14[5|7]|15[0-9])\d{8}$/ // 手机号码
        var phonevalue = this.$jq("#username").val();
      if (this.usernameReg == "") {
        this.msgphone = "用户名不能为空";
      } else if (!usernameReg.test(phonevalue)) {
        this.msgphone = "用户名不存在";
      } else {
        this.msgphone = "用户名正确";
      }

    }
  }
};
</script>
<style scoped>
#login_box {
  font-size: 0.96rem;
  background: #fff;
}
p {
  margin: 0;
  padding: 0;
}
.login_top {
  height: 2.75rem;
  line-height: 2.75rem;
  color: #616161;
  font-size: 1.17rem;
  border-bottom: 1px solid #bbb;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.login_p {
  width: 60%;
}
.arrow_p {
  width: 40%;
  position: relative;
}
.arrow1 {
  width: 1.375rem;
  height: 1.375rem;
  overflow: hidden;
  position: absolute;
  background-image: url(/static/iconBg.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: inline-block;
  background-position: 0rem -4rem;
  line-height: 2.75rem;
  top: 35%;
}
.login-tab {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid #d7d7d7;
}
.login_pas,
.login_mes {
  width: 50%;
  text-align: center;
}
.login_pas > span,
.login_mes > span {
  line-height: 2.76rem;
  padding-bottom: 0.7rem;
}
.loginPage {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wrap {
  width: 100%;
}
.input-container {
  width: 90%;
  margin: 1rem auto 0;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.1rem solid #d7d7d7;
  padding: 0.4rem 0;
}
.txt-username,
.txt-password {
  width: 20%;
}
#username,
#password {
  width: 80%;
  border: 0;
  color: #848689;
  outline: none;
}
::-webkit-input-placeholder {
  color: #bec1c7;
}
.icon-clear {
  background: url(/static/iconBg.png) no-repeat;
  width: 2.4rem;
  height: 1.68rem;
  background-size: cover;
  margin-right: 0.8rem;
  /* display: none; */
}
.checkbtn {
  background: url(/static/hide_password.png) no-repeat;
  width: 2.8rem;
  height: 1.68rem;
  background-size: cover;
  margin-right: 0.6rem;
}
#loginBtn,
#loginOneStep {
  width: 90%;
  margin: auto;
  text-align: center;
  line-height: 2.76rem;
}
#loginBtn {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
#loginOneStep {
  background: #fff;
  color: #f23030;
  border: 0.1rem solid #f23030;
}
.quick-nav,
.quick-login {
  width: 90%;
  margin: 1rem auto 0;
}
.quick-nav {
  display: flex;
  justify-content: space-between;
}
.icon {
  display: inline-block;
}
.txt-findpwd,
.quickReg {
  position: relative;
  padding-left: 1.5rem;
}
.icon-reg,
.icon-clock {
  width: 1.5rem;
  height: 1.25rem;
  position: absolute;
  bottom: 0;
}
.icon-reg {
  left: 0;
}
.icon-clock {
  background: url(/static/iconBg.png) no-repeat;
  background-size: cover;
  background-position: 0rem -1.75rem;
}
.icon-reg {
  background: url(/static/iconBg.png) no-repeat;
  background-size: cover;
  background-position: 0rem -2.9rem;
}
.quick-login {
  margin-top: 4rem;
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  text-align: center;
  position: relative;
}
.txt-otherLogin {
  color: #bfbfbf;
  font-weight: bold;
  margin: 0;
  width: 100%;
  flex-direction: column;
  position: absolute;
  top: -0.6rem;
  right: 30%;
  background: #fff;
  width: 40%;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
}
.agreement-tips {
  width: 100%;
  margin-top: 1rem;
}
.icon_login {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 3rem 0 0;
  border-top: 0.1rem solid #d7d7d7;
}
.quick-wx,
.quick-qq {
  width: 50%;
}
.icon-wx {
  background: url(/static/iconBg.png) no-repeat;
  background-size: cover;
  background-position: 0rem -10.5rem;
}
.icon-qq {
  background: url(/static/iconBg.png) no-repeat;
  background-size: cover;
  background-position: 0rem -8.8rem;
}
.icon-qq,
.icon-wx {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
}
/* 密码输入框样式设置 */
#telphone,
#telCode,
#login_password {
  outline: none;
  border: 0;
}
#msg_button {
  width: 5.18rem;
  padding: 0;
  height: 1.2rem;
  top: 0.125rem;
  outline: 0;
  background-color: #fff;
  -webkit-box-shadow: none;
  background-color: transparent;
  box-shadow: none;
  border: 0;
  border-left: 1px solid #d7d7d7;
}
.sms_login {
  display: none;
}
.show {
  display: none;
}
.pas_2222 {
  border-bottom: 0.14rem solid #f23030;
}
.pas_222 {
  border-bottom: 0.14rem solid #f23030;
}
.login_password {
  display: none;
}
.show2 {
  display: block;
}
.loginBtn_cc {
  background: #eee;
}
.btn-active {
  background-color: #f23030;
  color: #fff;
}
#f_password{
    width:10rem;
}
.icon-clearcc {
  background: url(/static/iconBg.png) no-repeat;
  width: 1.8rem;
  height: 1.8rem;
  background-size: cover;
  margin-right: 0.8rem;
  /* display: none; */
}
</style>


